<template>
  <div class="distribut router-fixed">
  	<div class="my-header">
  		<router-link to="/" class="my-header-setting"><x-icon type="ios-gear-outline" size="28"></x-icon></router-link>
  		<div class="user-info">
				<div class="avatar">
					<img width="60" height="60" src="../../assets/images/avatar.jpeg" alt="">
				</div>
				<div>
					<span class="user-name">狂奔的蜗牛</span>
					<p class="shop-time">开店时间：2017-12-28</p>
				</div>		
			</div>
  	</div>
  	<div class="nav-link-list">
  		<div class="horizontal-view">
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-icon"></i>
	  			<span>分销订单</span>
	  		</router-link>
	  		<div class="t_Line"></div>
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-pintuan-"></i>
	  			<span>我的团队</span>
	  		</router-link>
	  		<div class="t_Line"></div>
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-mingpian"></i>
	  			<span>我的名片</span>
	  		</router-link>
	  		<div class="t_Line"></div>
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-paihangbang"></i>
	  			<span>分销排行</span>
	  		</router-link>
  		</div>
  		<div class="l_Line"></div>
  		<div class="horizontal-view">
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-guide"></i>
	  			<span>新手必看</span>
	  		</router-link>
	  		<div class="t_Line"></div>
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-dianpu"></i>
	  			<span>查看网店</span>
	  		</router-link>
	  		<div class="t_Line"></div>
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-yuecopy"></i>
	  			<span>佣金明细</span>
	  		</router-link>
	  		<div class="t_Line"></div>
	  		<router-link class="nav-link-item" to="/" tag="div">
	  			<i class="iconfont icon-huiyuan"></i>
	  			<span>会员中心</span>
	  		</router-link>
  		</div>
  	</div>
  	<split></split>
		<!-- 钱包 -->
		<div class="my-wallet">
			<group gutter="0">
				<cell title="可提现金额" value="资金管理" is-link>
					<span slot="icon" class="wallet-icon iconfont icon-jinbiyue"></span>
					<span class="money">100.00</span>
				</cell>
			</group>
			<div class="floor wallet-container">
				<router-link to="/" class="wallet-item">
					<b>10.00</b>
					<h3>今日收入(¥)</h3>
				</router-link>
				<router-link to="/" class="wallet-item">
					<b>66.88</b>
					<h3>总销售额(¥)</h3>
				</router-link>
				<router-link to="/" class="wallet-item">
					<b>999.99</b>
					<h3>累计获得佣金(¥)</h3>
				</router-link>
			</div>
		</div>
		<div class="add-distribut-shop">
			<six-button type="danger">选择分销商品</six-button>
		</div>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'	
import Split from '@/components/public/Split'
export default {
	components: {
		Group,
		Cell,
		Split
	},
  data () {
  	return {

  	}
  }
}
</script>

<style scoped>
.my-header {
	position: relative;
	padding: 20px 15px 30px 15px;
	background: #f94f50 url('../../assets/images/fbag.png') no-repeat;
	background-size: cover; 
}
.my-header-setting {
	position: absolute;
	right: 15px;
	top: 15px;
	display: inline-block;
	height: 24px;
}
.my-header-setting svg {
	fill: #fff;
}
.user-info {
	display: flex;
	align-items: center;
	padding-top: 15px;
}
.avatar {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
	box-shadow: 0 0 4px rgba(0,0,0, .2)
}
.user-name {
	flex: 1;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}
.shop-time {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}
.horizontal-view {
  position: relative;
  display: flex;
}
.t_Line {
  flex: 0 0 auto;
  width: 1px; 
  height: 100%;
  background-color: rgb(232, 232, 232);
}
.l_Line {
  width: 100%;
  height: 1px;
  background-color: rgb(232, 232, 232);
  transform: scaleY(.5);
}
.nav-link-item {
	background: #fff;
	flex: 1;
	text-align: center;
	padding: 15px 0;
}
.nav-link-item:active {
	background: #f5f5f5;
}
.nav-link-item i {
	display: block;
	font-size: 28px;
}
.nav-link-item i,
.nav-link-item span {
	color: #666;
}
.nav-link-item span {
	font-size: 14px;
}
.wallet-container {
	display: flex;
	background: #fff;
	padding:  12px 0;
}
.wallet-item h3 {
	font-size: 12px;
	color: #999;
	line-height: 14px;
}
.wallet-icon {
	color: #e38000;
}
.my-wallet .iconfont {
	font-size: 20px;
	height: 22px;
	line-height: 22px;
	margin-right: 5px;
}
.wallet-item {
	flex: 1;
	text-align: center;
}
.wallet-item b {
	font-size: 16px;
	font-weight: bold;
	color: #f23030;
}
.money {
	color: #f23030;
}
.add-distribut-shop {
	padding: 15px;
}
.add-distribut-shop button {
	width: 100%;
	color: #fff;
	height: 42px;
}
</style>
